<template>

<div class="changes">
  <el-row :gutter="24" >
    <el-col :span="20"  style=" font-weight: 700 ;font-size: large;padding-left: 15px;" > 数据变化情况</el-col>
  </el-row>
  <el-row :gutter="24">
  <el-col :span="16" > 
    <div class="mian-outer">
      <p style=" font-weight: 700; line-height: 55px;font-size: 16px;padding-left: 20px">近一年数据增长变化趋势</p>
      <div id="mian" style="padding: 20px ;"> </div> 
    </div>
  </el-col>
  <el-col :span="8">
     <div class="bia-k" >
      <p style=" font-weight: 700; line-height: 55px;font-size: 16px;">近30天库表数据增量排行</p>
      <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%"
      :header-cell-style="{background:'#C4DCFE',color:'#606266',textAlign: 'center;'}"
      
       header-row-class-name="tableHead"
     >
      <el-table-column
        prop="address"
        header-align="center"
        align="center"
        label="数据资源名称"
        width="190">
      </el-table-column>
      <el-table-column
        prop="date"
        header-align="center"
        align="center"
        label="数据增量"
        width="">
      </el-table-column>
     
    </el-table>

    </div>
    </el-col>
</el-row>
    

</div>
</template>

<script >

import * as echarts from 'echarts';

export default {

  
      
mounted(){
  this.initEchart()
},

 data() {
        return {
          tableData: [{
            date: '0',
            address: '-- --'
          },  {
            date: '0',
            address: '-- --'
          }, 
          {
            date: '0',
            address: '-- --'
          }, 
          {
            date: '0',
            address: '-- --'
          }, 
           {
            date: '0',
            address: '-- --'
          }, 
          {
            date: '0',
            address: '-- --'
          }, 
          {
            date: '0',
            address: '-- --'
          }, 
          {
            date: '0',
            address: '-- --'
          }, 
          {
            date: '0',
            address: '-- --'
          }]
        }
      },
methods:{
 initEchart(){
   var myecart = echarts.init(document.getElementById('mian'))
   myecart.setOption({
     
        title: {
          textStyle:{
            fontSize:16,
            color:"black",
            fontFamily:"serif"
          }
        },
        tooltip: {},
        legend: {
          right:0,
          icon:"circle",
          name:['月新增库表数','月新增文件数','同比增长率','环比增长率']
        },
        xAxis: {
          axisLabel: {
              interval: 'auto',
              rotate: 50 //设置倾斜角度，数值 可设置 正负 两种，
              },
          data: ['2022.03', '2022.01', '2022.05', '2022.06','2022.07', '2022.08', '2022.09', '2022.10', '2022.11', '2022.12','2023.01', '2023.02',]
        },
        yAxis: {},
        series: [
          {
            name: '月新增库表数',
            stack: 'total',
            type: 'bar',
            itemStyle: {
              color: '#3272EE '
            },
            data: [0, 0, 0, 0, 0, 0,0, 1, 0, 0, 0, 0]
          },
          {
            name: '月新增文件数',
            type: 'bar',
            stack: 'total',
          itemStyle:{
             color: '#5CCFFC'
          },
            data: [0, 0, 0, 0, 0, 10 , 10 , 10 , 12, 14, 10, 5]
          },
          ,
          {
            name: '同比增长率',
            type: 'line',
            symbolSize: 8,   //设定实心点的大小
              itemStyle:{
             color: '#C5C5E7 '
          },  
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '环比增长率',
            type: 'line',
            symbolSize: 8,   //设定实心点的大小
              itemStyle:{
             color: '#FCAA3F '
          },  
             data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        ]}
   )

   
 }
 
},


}
</script>

<style scoped>
.changes{
  width: 1172px;
  margin: 0 auto;
  padding-top: 15px;
}

.mian-outer{
  margin-top: 15px;
  height: 470px;
  background-color: #fff;
  border-right:1px dashed #ccc ;
}

#mian{
  /* width: 500px; */
  height: 440px;
  margin-top: -60px;
}
.bia-k{
  margin-top: 15px;
 padding-left: 24px;
  padding-right: 24px;
  background-color: #fff;
  height: 470px;
}
.tableHead{
  font-weight:700;
}
</style>